import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Abc from './Abc'
import About from './About'
import Hello from './Hello'
import Home from './Home'
import Menu from './Menu'
import Student from './Student'
export default function App() {
  return (
    <div>
      <Menu></Menu>
      App
      {/* 
        Routes v6 中新增加的组件
          作用和Switch类型，都是用于Route的容器
          Routes中Route只有一个会被匹配
        v6中，Route的component render children都变了
          需要通过element来指定要挂载的组件
      */}
      <Routes>
        <Route path='/' element={<Home />}></Route>
        {/* 路由嵌套方式一加上/*  */}
        <Route path='/about' element={<About />}>
          <Route path='hello' element={<Hello />} />
          <Route path='abc' element={<Abc />} />
        </Route>
        <Route path='student/:id' element={<Student />}></Route>
      </Routes>
    </div>
  )
}
